<template>
  <div class="detail flex sw">
    <div class="detail_left">
      <div class="detail_header flex spacebetween">
        <div class="detail_header_left">
          <div class="imgContainer">
            <img class="cover" :src="songListMessage?.coverImgUrl" alt="" />
          </div>
        </div>
        <div class="detail_header_right">
          <div class="message">
            <div class="message_top">
              <i class="label">{{ flag ? '歌单' : '单曲' }}</i>

              <span class="name">{{ songListMessage?.name }}</span>
            </div>
            <div class="user_message flex align_c">
              <img
                class="userImg"
                :src="songListMessage?.creator.avatarUrl"
                alt=""
              />
              <span class="fs-12 username"
                ><a href="" v-html="songListMessage?.creator.nickname"></a>
              </span>
            </div>
            <div class="songListBtn">
              <button class="playbtn btn">
                <SvgIcon icon="icon-bofangqi-bofangshu"></SvgIcon>播放
              </button>
              <button class="btn">
                <SvgIcon icon="icon-tianjiawenjian-copy"></SvgIcon
                >{{ songListMessage?.subscribedCount }}
              </button>
              <button class="btn">
                <SvgIcon icon="icon-zhuanfa"></SvgIcon>
                {{ songListMessage?.shareCount }}
              </button>

              <button class="btn">下载</button>
              <button class="btn">
                <SvgIcon icon="icon-pinglun"></SvgIcon>
                ({{ songListMessage?.commentCount }})
              </button>
            </div>
            <div class="tags">
              标签：
              <a v-for="tag in songListMessage?.tags" href="" class="tag">
                {{ tag }}
              </a>
            </div>
            <div class="desc" :class="{ texthidden: textHidden }">
              介绍： {{ songListMessage?.description }}
            </div>
            <div>
              <span style="float: right" @click="showText">
                {{ textHidden ? '展开' : '收起' }}
                <SvgIcon icon="icon-arrow-down"></SvgIcon
              ></span>
            </div>
          </div>
        </div>
      </div>
      <div class="mainArea">
        <div class="b_box">
          <div class="b_box_header flex between">
            <div class="b_box_left flex">
              <div class="title">歌曲列表</div>
              <div class="title1 fs-12" v-if="songliststore.playList">
                {{ (songliststore.playList as any).length }}首歌
              </div>
            </div>
            <div class="b_box_right">
              播放：<span class="playCount">{{
                songListMessage?.playCount
              }}</span>
              次
            </div>
          </div>
        </div>

        <ul class="playList">
          <li class="td flex between align_item music">
            <span class="td_space"></span><span class="td_title">歌曲标题</span
            ><span class="td_time">时长</span><span class="td_singer">歌手</span
            ><span class="td_album">专辑</span>
          </li>
          <li
            v-for="(item, index) in songliststore.playList?.slice(0, 10)"
            class="flex music between"
            @click="songStore.setId(item.id)"
          >
            <div class="td_space">{{ index + 1 }}</div>
            <div class="music_name td_title">{{ item.name }}</div>
            <div class="music_time td_time">{{ item.id }}</div>
            <div class="music_singer td_singer">{{ item.ar[0].name }}</div>

            <div class="music_al td_album">{{ item.al.name }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="detail_right">
      <div class="g_asideBox">
        <div class="g_asideBox_header flex between">
          <div class="title fs-12">{{ '喜欢这个歌单的人' }}</div>
        </div>
        <div class="g_asideBox_main flex">
          <img
            class="subscriber"
            v-for="i in subs"
            :src="i.avatarUrl"
            :alt="i.nickname"
          />
        </div>
      </div>
      <div class="g_asideBox">
        <div class="g_asideBox_header flex between">
          <div class="title fs-12">{{ '热门歌单' }}</div>
        </div>
        <div class="g_asideBox_main flex">
          <ul class="singer_list">
            <li
              v-for="item in relateSongList"
              class="flex streamer_list_item"
              @click="jump(item.id)"
            >
              <a>
                <img class="asideCover" :src="item.coverImgUrl" alt="" />
              </a>
              <div class="detail_aside">
                <div class="fs-14 bold singer_name">{{ item.name }}</div>
                <div class="fs-12 singer_desc">
                  by：{{ item.creator.nickname }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'gDetail',
}
</script>

<script lang="ts" setup>
import { reqSongListDetail } from '@/api/detail'
import { songListDetail } from '@/api/model/songList'
import { songOfList, Songs } from '@/api/model/song'
import { subscriber } from '@/api/model/subscriber'
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { reqPlayList } from '@/api/recommend'
import { useSongStore } from '@/stores/song'
import { reqMusicDetail, reqRelateSongList, reqSubscriber } from '@/api/song'
import { useSongListStore } from '@/stores/modules/songList'
const route = useRoute()
const songListID = ref()
const songID = ref()
const flag = ref(true)
const songStore = useSongStore()

const songListMessage = ref<songListDetail>()
async function getSongListDetail(id: number) {
  if (songListID) {
    const data = await reqSongListDetail(songListID.value)
    songListMessage.value = data.playlist
    console.log(data.playlist)
  }
  if (songID) {
  }
}

//展示歌单描述
const textHidden = ref(true)
function showText() {
  textHidden.value = !textHidden.value
}
const playList = ref<Songs>()

const songliststore = useSongListStore()

//获取歌单歌曲
async function getPlayList() {
  songliststore.getPlayList(songListID.value)

  //let { songs } = await reqPlayList(songListID.value)
  // console.log('songs')
  // console.log(songs)

  // console.log('songDetail')

  playList.value = songliststore.playList
}
const subs = ref<subscriber[]>()
async function getSubscribe(id: number) {
  const { subscribers } = await reqSubscriber(id)
  subs.value = subscribers.slice(0, 8)
}
const relateSongList = ref<songListDetail[]>()
async function getRelateSongList(id: number) {
  let { playlists } = await reqRelateSongList(id)
  relateSongList.value = playlists
}
const router = useRouter()
function jump(id: number) {
  router.push('/detail/songlist?songListId=' + id)
}
onMounted(() => {
  songListID.value = route.query.songListId
  songID.value = route.query.songId
  flag.value = songID ? true : false
  if (songListID.value) getSongListDetail(songListID.value)
  getPlayList()
  getSubscribe(songListID.value)
  getRelateSongList(songListID.value)
})
watch(
  () => route.query.songListId,
  () => {
    songListID.value = route.query.songListId
    console.log(route.query.songListId)
    console.log(songListID.value)

    getSongListDetail(songListID.value)
    getPlayList()
    getSubscribe(songListID.value)
    getRelateSongList(songListID.value)
  }
)
</script>

<style scoped lang="less">
.imgContainer {
}

.detail {
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
}
.cover {
  width: 208px;
}
.user_message {
  margin-bottom: 20px;
}
.detail_header {
  font-size: 12px;
  margin-bottom: 40px;
}
.userImg {
  margin-right: 10px;
  width: 35px;
}
.username {
  color: #4273d4;
}
.detail_left {
  margin-top: 10px;

  width: 710px;
  padding: 25px 20px 0 40px;
}
.detail_header_left {
  margin-right: 30px;
  width: 210px;
}
.detail_header_right {
  width: 415px;
}
.message_top {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
.songListBtn {
  margin-bottom: 20px;
}
.tags {
  margin-bottom: 10px;
}
.tag {
  display: inline-block;
  line-height: 21px;
  text-align: center;
  color: #666;

  height: 21px;
  font-size: 12px;
  border-radius: 20px;
  width: 50px;
  background: #f3f3f3;
}

.btn {
  height: 31px;
  margin-right: 6px;
  border: 1px solid #c3c3c3;
  border-radius: 5px;
  padding: 0 8px;
  color: #333333;
  background-image: linear-gradient(#fff, #f7f7f79c 50%, #fbfbfb);
}
.playbtn {
  width: 66px;
  color: #fff;
  background-image: linear-gradient(#4392db, #2172c1);
}

.btn:hover {
  background: #fff;
}
.playbtn:hover {
  background-image: linear-gradient(#a6c7e6, #2172c1);
}
.label {
  display: inline-block;
  width: 55px;
  color: #ffffff;
  font-size: 13px;
  padding-left: 8px;
  margin-right: 10px;
  line-height: 35px;
  background: url('@/assets/icon/BBD.png') left center no-repeat;
  background-size: 55px 45px;
}
.name {
  display: inline-block;
  line-height: 35px;
  font-size: 20px;
}
.desc {
  color: #666;
  white-space: pre-wrap;
  line-height: 1.5em;
  margin-bottom: 20px;
}
.desc.texthidden {
  -webkit-line-clamp: 10; //用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
  display: -webkit-box; //和1结合使用，将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient: vertical; //和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
  overflow: hidden; //文本溢出限定的宽度就隐藏内容
  text-overflow: ellipsis; //多行文本的情况下，用省略号“…”隐藏溢出范围的文本
}

////////////////////////////////////
.b_box {
  .title {
    margin-right: 20px;
    font-size: 20px;
  }
  .title1 {
    color: #666;
  }
}
.b_box_left {
  line-height: 35px;
}
.b_box_header {
  height: 35px;
}
.b_box_right {
  line-height: 35px;
  font-size: 12px;
}
.playCount {
  color: #c20c6d;
}
////////////////////////////////////////
.detail_right {
  border-left: 1px solid #d4d4d4;
}

///////////////////////////////////歌曲列表
.playList {
  border: 1px solid #d9d9d9;
  margin-bottom: 50px;
}
.playList li:nth-child(even) {
  background-color: #f7f7f7;
}
.music {
  color: #666;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}

.td {
  background-color: #f7f7f7;
  height: 34px;
  border-bottom: 1px solid #d9d9d9;
}
.td span {
  border-right: 1px solid #d9d9d9;
}

.td_space {
  padding-left: 20px;
  display: inline-block;
  width: 74px;
}
.td_title {
  padding-left: 7px;
  display: inline-block;

  width: 235px;
}
.td_time {
  padding-left: 7px;
  width: 111px;
}
.td_singer {
  padding-left: 7px;
  width: 90px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.td_album {
  padding-left: 7px;
  width: 129px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

///////////////////////
.g_asideBox {
  padding: 20px 30px;
}
.g_asideBox_main {
  margin-top: 20px;
  width: 210px;
  flex-wrap: wrap;
}

.subscriber {
  width: 40px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.asideCover {
  width: 50px;
}

.streamer_list_item {
  line-height: 20px;
  margin-bottom: 15px;
  .detail_aside {
    margin-left: 10px;
    min-width: 0;
  }
  .singer_name {
    font-weight: normal;
    font-size: 12px;
  }
}
</style>

<style lang="less"></style>
